<template>
    <div class="dynamic-input">
        <div class="add-container" v-if="value.length ===0">
            <el-button type="text" @click="addClick(0)">添加KV</el-button>
        </div>
        <el-form :inline="true">
            <div class="input-container" v-for="(_,index) in value">
                <el-form-item class="input" label="key:" :size="size">
                    <el-input v-model="value[index].key" :size="size"></el-input>
                </el-form-item>
                <el-form-item class="input" label="val:" :size="size">
                    <el-input v-model="value[index].val" :size="size" @keyup.enter.native="addClick(index+1)">
                        <template slot="suffix">
                            <i class="input-btn el-icon-minus" @click="minusClick(index)"></i>
                            <i class="input-btn el-icon-plus" @click="addClick(index+1)"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <br>
            </div>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/9/27 18:18
     *
     * 动态增减输入框
     **/
    export default {
        name: 'DynamicKVInput',
        props: {
            value: {
                type: Array,
                default: []
            },
            size: {
                type: String,
                default: 'mini'
            }
        },
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {

            })
        },
        methods: {
            addClick(index) {
                this.value.splice(index, 0, {key: '', val: ''});
            },
            minusClick(index) {
                this.value.splice(index, 1);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .dynamic-input {
    }

    .add-container {
        text-align center
    }

    .input-container {
        display flex
        justify-content left
        align-items center
    }

    .input-btn {
        margin-right 10px
        cursor pointer
    }

    .input {
        margin-bottom 0
        line-height normal
    }
</style>
